<template>
  <div>
    <el-dialog title="工单详情" :modal="a" :visible.sync="visible" width="38%">
      <div class="head">
        <div class="icon">
          <i />
          <span>待办</span>
        </div>
        <img src="img" alt="">
      </div>
      <div class="box">
        <div class="bigbox box1">
          <div>设备编号: <span>01000058</span></div>
          <div>创建日期: <span>
            2023.04.24 17:16:23</span></div>
        </div>
        <div class="bigbox">
          <div>运营人员: <span>
            运维刘俊杰</span></div>
          <div>工单类型: <a>维修工单</a></div>
        </div>
        <div class="bigbox">
          <div>工单方式: <span>手动</span></div>
          <div>备注: <span>jg g</span></div>
        </div>
        <!-- <div class="bigbox">
               <div>备注: <span>{{ formDetail.desc }}</span></div>
             </div> -->
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="
            background-color: #fbf4f0 !important;
            color: #655b56 !important;
            border: none;
            margin-right: 255px;
          "
          @click="quxiao"
        >取消工单</el-button>
      </span>

      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="30%"
        :modal="a"
      >
        <span>取消工单后，将不能恢复，是否确认取消？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensure">确 定</el-button>
        </span>
      </el-dialog>

    </el-dialog>

  </div>
</template>

<script>
// import { workOrderDetail } from '@/api/workOrder'
export default {
  name: 'DkdElementFindInfo',
  props: {
    currentForm: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      visible: false,
      dialogVisible: false,
      dialogVisible1: false,
      list: {},
      a: false
    }
  },
  created () {
    this.list = this.currentForm
  },
  methods: {
    bigDialog () {
      this.visible = true
      console.log(1)
    },

    quxiao () {
      console.log(this.currentForm)
      this.dialogVisible = true
    },

    ensure () {
      this.$message.warning('演示系统，不支持此操作')
      this.dialogVisible = false
      this.$emit('update:visible', false)
    },

    lack () {
      console.log(1)
      this.dialogVisible1 = true
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 60px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  i {
    font-size: 30px;
  }
  .green {
    color: lawngreen;
  }
  span {
    font-size: 16px;
    margin-left: 20px;
  }
}
.box {
  width: 590px;
  height: 180px;
  // background-color: #ccc;
  padding-left: 30px;
  padding-right: 15px;
  .bigbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    .al {
      color: #5f84ff;
    }
  }
  .box1 {
    margin-top: 40px;
  }
}
</style>
